<template>
    <div id="nav-bar">
        <div class="container">
            <div v-for="(title, index) of titles" :key="index" class="content">
                <span @click="linkClick(title)">
                    <router-link  :to="title.path">{{title.name}}</router-link>
                </span>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        name: "NavBar",
        components: {

        },
        props: {
            titles: {
                type: Array,
                require: true
            }
        },
        methods: {
            linkClick(title){
                this.$emit("nav-click", title.isBeSearch);
            }
        }
    }
</script>

<style scoped>
    #nav-bar{
        background-color: #D53031;
        height: 60px;
        margin-top: 20px;
    }
    .container{
        display: flex;
        justify-content: space-evenly;
    }
    .content{
        line-height: 60px;
        text-align: center;
        font-size: 20px;
        width: 100px;
    }
    .content a{
        text-decoration: none;
        color: white;
    }
    .content a:hover{
        color: #409EFF;
    }
</style>
